import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';

import _ from 'lodash';
import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
    Modal,
    Checkbox,
    Row,
    Col,
    Spin,
    Badge,
    Empty,
    Pagination,
} from 'antd';
import '@ant-design/compatible/assets/index.css';


interface bindModalProps extends FormComponentProps {
    dispatch: Dispatch<any>;
    cabinetAllList: any;
    loading: any;
    visible: boolean;
    bindCabinet: (visible: boolean, pageIndex?: any, pageSize?: any) => void;
    search: any;
    type: number;
}

interface bindModalState {
    cabinetList: any[],
    indeterminate: any;
    checkAll: any;
    pageIndex: any;
    pageSize: any;
}

class BindModelElem extends Component<bindModalProps, bindModalState> {
    state: bindModalState = {
        cabinetList: [],
        indeterminate: false,
        checkAll: false,
        pageIndex: 1,
        pageSize: 10,
    }

    // 选择柜体/货架
    changeCabinet = (values: any) => {
        this.setState({ cabinetList: values });
    }

    // 确认
    bindCabinets = () => {
        const { dispatch, search, type } = this.props;
        const { cabinetList } = this.state;

        dispatch({
            type: 'tencentConfig/fetchBundleCabinet',
            payload: {
                search,
                cabinetIds: cabinetList.join(','),
                type: type
            },
        });

        this.cancelHandel();
    }

    renderTitle = () => {
        const { cabinetAllList, type } = this.props;
        return (
            <p style={{ textAlign: 'left' }}>
                绑定{type === 1 ? '柜体' : type === 2 ? '旧货架' : '新货架'}
                <span style={{ fontSize: '12px', marginLeft: '30px', fontWeight: 'normal' }}>
                    可绑定{type === 1 ? '柜体' : type === 2 ? '旧货架' : '新货架'}{cabinetAllList.count}
                </span>
            </p>
        );
    }

    onCheckAllChange = (e: any) => {
        const { cabinetAllList } = this.props;
        const list = (cabinetAllList.list || []).reduce((pre: any, cur: any) => {
            pre.push(cur.id);
            return pre;
        }, []);

        this.setState({
            cabinetList: e.target.checked ? list : [],
            indeterminate: false,
            checkAll: e.target.checked,
        });
    }

    cancelHandel = () => {
        const { bindCabinet } = this.props;
        bindCabinet(false);

        this.setState({
            indeterminate: false,
            checkAll: false,
            cabinetList: [],
        });
    }

    // 切换分页
    onSelectChange = (page: number, psize: number | undefined) => {
        const { bindCabinet } = this.props;

        this.setState({
            pageIndex: page,
            pageSize: psize,
        });
        bindCabinet(true, page, psize);
    }

    render() {
        const {
            cabinetAllList, visible, loading, type
        } = this.props;

        const {
            indeterminate, checkAll, cabinetList, pageSize, pageIndex,
        } = this.state;

        return (
            <>
                <Modal
                    title={this.renderTitle()}
                    visible={visible}
                    width={800}
                    style={{ top: 100 }}
                    onOk={this.bindCabinets}
                    onCancel={this.cancelHandel}
                >
                    <Spin spinning={loading}>
                        {cabinetAllList.count !== 0 && (
                            <Checkbox
                                indeterminate={indeterminate}
                                onChange={this.onCheckAllChange}
                                checked={checkAll}
                                style={{ margin: '0 0 20px 4.16667%' }}
                            >
                                全选
                            </Checkbox>
                        )}
                        <Checkbox.Group style={{ width: '100%', border: '1px solid #f0f0f0', borderBottom: 'none' }} onChange={this.changeCabinet} value={cabinetList}>
                            {(cabinetAllList?.list || []).map((item: any) => (
                                <Row key={item.id} style={{ borderBottom: '1px solid #f0f0f0', padding: '10px 0' }}>
                                    <Col span={1} />
                                    <Col span={12}>
                                        <Checkbox value={item.id}>{item.name}</Checkbox>
                                    </Col>
                                    <Col span={7}>
                                        {item.code}
                                    </Col>
                                    {type === 1 && <Col span={4}>
                                        {item.linkStatus === '在线' && (
                                            <Badge status="success" text="在线" />
                                        )}
                                        {item.linkStatus !== '在线' && (
                                            <Badge status="default" text="离线" />
                                        )}
                                    </Col>}
                                </Row>
                            ))}
                        </Checkbox.Group>
                        {cabinetAllList.count !== 0 && (
                            <Pagination
                                total={cabinetAllList.count}
                                showTotal={total => `共${total}条数据`}
                                pageSize={pageSize}
                                current={pageIndex}
                                style={{ marginTop: 16, textAlign: 'right' }}
                                onChange={this.onSelectChange}
                                onShowSizeChange={this.onSelectChange}
                            />
                        )}
                        {cabinetAllList.count === 0 && (
                            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={`暂无可绑定${type === 1 ? '柜体' : type === 2 ? '旧货架' : '新货架'}`} />
                        )}
                    </Spin>
                </Modal>
            </>
        );
    }
}

export default Form.create<bindModalProps>()(BindModelElem);
